<template>
  <div>
    <h1>All Book List</h1>
    <el-button type="primary" @click="refresh">刷新</el-button>
    <el-table :data="bookList" stripe style="width: 100%">
      <el-table-column prop="id" label="ID"> </el-table-column>
      <el-table-column prop="bookName" label="书名"></el-table-column>
      <el-table-column prop="author" label="作者"></el-table-column>
      <el-table-column
        prop="beautyDate"
        label="发布日期"
        width="200px"
      ></el-table-column>
      <el-table-column prop="price" label="价格"></el-table-column>
      <el-table-column fixed="right" label="操作" width="120">
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="deleteBookById(scope.row.id)"
            type="text"
            size="small"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      bookList: [],
    };
  },
  methods: {
    refresh() {
      axios.get("/api/book").then((res) => {
        let tmp = [];
        res.data.forEach((item) => {
          item.beautyDate = new Date(item.publicationDate).toLocaleString();
          tmp.push(item);
        });
        this.bookList = res.data;
      });
    },
    deleteBookById(id) {
      axios.delete(`/api/book/${id}`).then(() => {
        this.$message({
          message: "书本删除成功",
          type: "success",
        });

        axios.get("/api/book").then((res) => {
          let tmp = [];
          res.data.forEach((item) => {
            item.beautyDate = new Date(item.publicationDate).toLocaleString();
            tmp.push(item);
          });
          this.bookList = res.data;
        });
      });
    },
  },
};
</script>

<style scoped>
</style>
